/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

    // Initialisation de variables globales au script

    // Initialisation des indicateurs de bonnes réponses à donner pour chaque environnement
    // Tableau organisés de la manière suivante : ('left','top'[,'zoom'])
    var tab_bonnes_reponses_e1 = Array('-1200px','-200px');
    var tab_bonnes_reponses_e2 = Array('-700px','-350px');
    var tab_bonnes_reponses_e3 = Array('-500px','-650px',7);
    var tab_bonnes_reponses_e4 = Array('-400px','-50px',-8);

    // Initialisation de l'indicateur d'environnement (ou niveau) dans lequel se trouve l'utilisateur
    // Au début : environnement/niveau 1
    // Cette variable est mise à jour au moment du changement d'environnement, lors de l'appel AJAX
    var environment = 1;

    // Initialisation des variables utilisées pour gérer le compteur de temps
    var timer_width = 0;
    var animating = true;
    var shifting = false;

    // Rapport entre la largeur et la hauteur (=> ratio = largeur/hauteur) des images pour prendre les photos
    var img_ratio = 2;
    // Nombre de pixel servant au zoom
    var img_zoom = 100;
    // Nombre de pixel servant au décalage horizontal
    var img_shift_horizontal = 100;
        // Nombre de pixel servant au décalage vertical
    var img_shift_vertical = 50;
    
    var model_dezoom = 550;
    var model_img_ratio = 710/480;
    var model_init = true;

    // Compteur de zoom
    var count_zoom = 0;

    // Au lancement de l'environnement 1 du jeu 1
    $(document).ready(function(){

        // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
        load_jquery_properties();
    });
    
    // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
    function load_jquery_properties(){

        if(environment == 1){
            $('#img_wip').css('display','none');
            //$('.img_to_reproduce_env_1').css('display','none');
            // On commence par afficher le modèle un certain temps avant de lancer le compteur
            $('.img_to_reproduce_env_1').fadeIn(1000, function(){
                  // Modification suite demande ergo : 27/03
//                $('#model_img_environment').delay(500).animate({
//                    width: "+="+model_dezoom+"px",
//                    height: "+="+model_dezoom/model_img_ratio+"px"
//                }, 1000);
//
//                $(this).delay(500).animate({
//                    width: "+="+model_dezoom+"px",
//                    height: "+="+model_dezoom/model_img_ratio+"px"
//                }, 1000, function(){
                    $('#img_wip').css('display','block');
                    $('#model_img_environment').delay(2000).animate({
                        width: "-="+model_dezoom+"px",
                        height: "-="+model_dezoom/model_img_ratio+"px"
                    }, 1000);

                    $(this).delay(2000).animate({
                        width: "-="+model_dezoom+"px",
                        height: "-="+model_dezoom/model_img_ratio+"px"
                    }, 1000, function(){
                        animating = false;
                        model_init = false;
                    });
                });
//            });
        }
        else{
            //$('.img_to_reproduce').css({'width': '135px', 'height': '83.2px'});
            //$('#model_img_environment').css({'width': '135px', 'height': '83.2px'});
            $('.img_to_reproduce').delay(1000).fadeIn(1000, function(){
                animating = false;
                model_init = false;
            });
        }

        count_zoom = 0;

        // Fonction exécutée à intervales de temps réguliers
        window.setInterval(function() {

            if(animating == false){
                // Si la taille a atteint son maximum
                if(timer_width < 450){

                    animating = true;
                    if(timer_width < 150){
                        $('#timing').css('background-color','#00FF00');
                    }
                    if((timer_width > 150) && (timer_width < 300)){
                        $('#timing').css('background-color','#FF6600');
                    }
                    if(timer_width > 300){
                        $('#timing').css('background-color','#FF0000');
                    }

                    $('#timing').animate({
                        width: "+=5px"
                        //$('#timing').delay(200).fadeIn('slow');delay(200)
                    }, 400, function(){
                        animating = false;
                    });
                    timer_width = timer_width+5;
                }
            }
        }, 400);

        // Initialisation de l'indicateur du nombre de bonnes réponses données par l'utilisateur
        var tab_bonnes_reponses_user = Array('','');
        var tab_bonnes_reponses_environment = Array();

        // On mémorise le nombre de bonnes réponses à donner en fonction de l'environnement
        switch(environment){
            case 1:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e1;
            break;
            case 2:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e2;
            break;
            case 3:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e3;
                tab_bonnes_reponses_user.push('');
            break;
            case 4:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e4;
                tab_bonnes_reponses_user.push('');
            break;
        }


        $('#img_environment').draggable({disabled: false, containment:'window'});

        // On charge l'écran en fondu
        $('#content').fadeIn(1000);

        // Au clic sur le bouton 'replay', on recharge la page pour recommencer le jeu
        $('#btn_replay').click(function(){
            $('#content').css('display', 'none');
            location.reload();
        });

//        $('.img_to_reproduce').mouseleave(function(){
//            if(model_init == false){
//                $('#model_img_environment').animate({
//                    width: "-="+model_dezoom+"px",
//                    height: "-="+model_dezoom/model_img_ratio+"px",
//                    opacity: "-=0.25"
//                }, 1000);
//
//                $(this).animate({
//                    width: "-="+model_dezoom+"px",
//                    height: "-="+model_dezoom/model_img_ratio+"px",
//                    opacity: "-=0.25"
//                    },1000);
//            }
//        });
//        
//        $('.img_to_reproduce').mouseenter(function(){
//            if(model_init == false){
//                $('#model_img_environment').animate({
//                    width: "+="+model_dezoom+"px",
//                    height: "+="+model_dezoom/model_img_ratio+"px",
//                    opacity: "+=0.25"
//                }, 1000);
//
//                $(this).animate({
//                    width: "+="+model_dezoom+"px",
//                    height: "+="+model_dezoom/model_img_ratio+"px",
//                    opacity: "+=0.25"
//                    },1000);
//            }
//        });


        // Au clic sur le bouton "dezoom", on rétrécie l'image
        $('#btn_dezoom').click(function(){
            if(!shifting){

                if(count_zoom >-9){

                    // On indique que l'on se situe en phase de décalage
                    shifting = true;

                    // Récupération de la valeur de décalage à gauche
                    var img_right = $('#img_environment').css('left');
                    img_right = img_right.split('p');
                    img_right = parseInt(img_right[0]);

                    // Récupération de la taille de l'image
                    var img_width = $('#img_environment').css('width');
                    img_width = img_width.split('p');
                    img_width = parseInt(img_width[0]);

                    // Calcul de différence pour autoriser ou non le décalage
                    var diff_width = img_width + img_right;


                    // Récupération de la valeur de décalage en bas
                    var img_bottom = $('#img_environment').css('top');
                    img_bottom = img_bottom.split('p');
                    img_bottom = parseInt(img_bottom[0]);

                    // Récupération de la taille de l'image
                    var img_height = $('#img_environment').css('height');
                    img_height = img_height.split('p');
                    img_height = parseInt(img_height[0]);

                    // Calcul de différence pour autoriser ou non le décalage
                    var diff_height = img_height + img_bottom; // diff_height > 500

                    var action_animation = 0;
                    // On translate en largeur et en hauteur
                    if((diff_width <= 700)&&(diff_height <= 500)){
                        action_animation = 0;
                    }
                    // On translate en largeur
                    if((diff_width <= 700)&&(diff_height > 500)){
                        action_animation = 1;
                    }
                    // On translate en hauteur
                    if((diff_width > 700)&&(diff_height <= 500)){
                        action_animation = 2;
                    }
                    // Rien n'est translaté, on se situe dans les conditions idéales de dézoom
                    if((diff_width > 700)&&(diff_height > 500)){
                        action_animation = 3;
                    }

                    switch(action_animation){

                        case 0:
                            // On translate en largeur et en hauteur
                            $('#img_environment').animate({
                                left: "+="+img_shift_horizontal+"px",
                                top: "+="+img_shift_vertical+"px",
                                width: "-="+img_zoom+"px",
                                height: "-="+img_zoom/img_ratio+"px"
                            }, 300, function(){
                                shifting = false;
                            });
                            break;

                        case 1:
                            // On translate en largeur
                            $('#img_environment').animate({
                                left: "+="+img_shift_horizontal+"px",
                                //top: "+="+img_shift_vertical+"px",
                                width: "-="+img_zoom+"px",
                                height: "-="+img_zoom/img_ratio+"px"
                            }, 300, function(){
                                shifting = false;
                            });
                            break;

                        case 2:
                            // On translate en hauteur
                            $('#img_environment').animate({
                                //left: "+="+img_shift_horizontal+"px",
                                top: "+="+img_shift_vertical+"px",
                                width: "-="+img_zoom+"px",
                                height: "-="+img_zoom/img_ratio+"px"
                            }, 300, function(){
                                shifting = false;
                            });
                            break;

                        case 3:
                            // Rien n'est translaté, on se situe dans les conditions idéales de dézoom
                            $('#img_environment').animate({
                                //left: "+="+img_shift_horizontal+"px",
                                //top: "+="+img_shift_vertical+"px",
                                width: "-="+img_zoom+"px",
                                height: "-="+img_zoom/img_ratio+"px"
                            }, 300, function(){
                                shifting = false;
                            });
                            break;
                    }


                    // Décrémentation du compteur de zoom
                    count_zoom--;
                }
            }
        });

        // Au clic sur le bouton "zoom", on agrandit l'image
        $('#btn_zoom').click(function(){
            if(!shifting){

                if(count_zoom <9){
                    // On indique que l'on se situe en phase de décalage
                    shifting = true;

                    $('#img_environment').animate({
                        width: "+="+img_zoom+"px",
                        height: "+="+img_zoom/img_ratio+"px"
                    }, 300, function(){
                        shifting = false;
                    });
                    // Incrémentation du compteur de zoom
                    count_zoom++;
                }
            }
        });

        // Au clic sur le bouton "shift left", on décale l'image à gauche
        $('#btn_shift_left').click(function(){
            if(!shifting){
                // On indique que l'on se situe en phase de décalage
                shifting = true;

                // Récupération de la valeur de décalage à gauche
                var img_right = $('#img_environment').css('left');
                img_right = img_right.split('p');
                img_right = parseInt(img_right[0]);

                // Récupération de la taille de l'image
                var img_width = $('#img_environment').css('width');
                img_width = img_width.split('p');
                img_width = parseInt(img_width[0]);

                // Calcul de différence pour autoriser ou non le décalage
                var diff = img_width + img_right;
                if(diff > 700){
                    $('#img_environment').animate({
                        left: "-="+img_shift_horizontal+"px"
                    }, 300, function(){
                        shifting = false;
                    });
                }
                else{
                    shifting = false;
                }
            }
        });

        // Au clic sur le bouton "shift right", on décale l'image à droite
        $('#btn_shift_right').click(function(){
            if(!shifting){
                // On indique que l'on se situe en phase de décalage
                shifting = true;

                var img_left = $('#img_environment').css('left');
                img_left = img_left.split('p');
                img_left = img_left[0];
                if(img_left < 0){
                    $('#img_environment').animate({
                        left: "+="+img_shift_horizontal+"px"
                    }, 300, function(){
                        shifting = false;
                    });
                }
                else{
                    shifting = false;
                }
            }
        });

        // Au clic sur le bouton "shift left", on décale l'image à gauche
        $('#btn_shift_top').click(function(){
            if(!shifting){
                // On indique que l'on se situe en phase de décalage
                shifting = true;

                var img_top = $('#img_environment').css('top');
                img_top = img_top.split('p');
                img_top = img_top[0];
                if(img_top < 0){
                    $('#img_environment').animate({
                        top: "+="+img_shift_vertical+"px"
                    }, 300, function(){
                        shifting = false;
                    });
                }
                else{
                    shifting = false;
                }
            }
        });

        // Au clic sur le bouton "shift right", on décale l'image à droite
        $('#btn_shift_bottom').click(function(){
            if(!shifting){
                // On indique que l'on se situe en phase de décalage
                shifting = true;

                // Récupération de la valeur de décalage en bas
                var img_bottom = $('#img_environment').css('top');
                img_bottom = img_bottom.split('p');
                img_bottom = parseInt(img_bottom[0]);

                // Récupération de la taille de l'image
                var img_height = $('#img_environment').css('height');
                img_height = img_height.split('p');
                img_height = parseInt(img_height[0]);

                // Calcul de différence pour autoriser ou non le décalage
                var diff = img_height + img_bottom;
                if(diff > 500){
                    $('#img_environment').animate({
                        top: "-="+img_shift_vertical+"px"
                    }, 300, function(){
                        shifting = false;
                    });
                }
                else{
                    shifting = false;
                }
            }
        });


        // Traitement lorsque l'on clique sur le bouton de validation de la séquence d'images
        $('#btn_shoot').click(function(){

            //1. On récupère les valeurs 'left' et 'top' de décalage de l'image            
            tab_bonnes_reponses_user[0] = $('#img_environment').css('left');
            tab_bonnes_reponses_user[1] = $('#img_environment').css('top');

            // Pour les environnements 3 et 4, on récupère également le zoom
            if((environment == 3) || (environment == 4)){
                tab_bonnes_reponses_user[2] = count_zoom;
            }

            //alert(tab_bonnes_reponses_user);

            //2. on compare le tableau de résultats avec le tableau de l'utilisateur
            var reponses_ok = true;
            for(i=0;i<tab_bonnes_reponses_user.length;i++){
                if(tab_bonnes_reponses_user[i] != tab_bonnes_reponses_environment[i])
                    reponses_ok = false;
            }

            //reponses_ok = true;
            // SI les tableaux sont identiques
            if(reponses_ok){
                
                // On décrémente la jauge de temps
                animating = true;
                    if(timer_width-30 < 0){
                        var tmp = timer_width-30;
                        tmp = 30 + tmp;
                        $('#timing').animate({
                            width: "-="+tmp+"px"
                        }, 100, function(){
                            timer_width = 0;
                            animating = false;
                        });
                    }
                    else{
                        $('#timing').animate({
                            width: "-=30px"
                        }, 100, function(){
                            timer_width = timer_width-30;
                            animating = false;
                        });
                    }

                //  4a. on change d'environnement
                
                // Lancement d'une mini-animation de transition'
                // .../... RAF, intégration d'un petit son de succès...
                

                $('.img_to_reproduce').css('display','none');
                // Incrémentation de l'indicateur d'environnement/niveau
                environment++;
                
                // Si on a fini l'environnement 4, le jeu est terminé
                if(environment > 4){
                    $('#zone_interaction').animate({
                        opacity: "-=0.3"
                    });
                    $('#zone_basse').animate({
                        opacity: "-=0.3"
                    });
                    $('#end_game').fadeIn(800,function(){
                        $('#zone_interaction').delay(500).fadeOut(1000);
                        $(this).delay(500).fadeOut(1000);
                    });

                    $('#zone_basse').delay(1500).fadeOut(600, function(){

                        // On transmet la valeur du timer au controleur pour calculer le score
                        var data_result = {
                                timer : timer_width
                                };
                        // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                        $.ajax({
                            // url vers la méthode de chargement du nouvel environnement
                            url: 'endGame',
                            // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                            type: 'POST',
                            // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                            async : false,
                            // Données à transmettre et mises en forme précédemment
                            data: data_result,
                            success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                // Insertion de la vue du nouvel environnement chargée par le controleur
                                $('#content').html(msg);
                                // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                $('#zone_result').fadeIn(2000);
                            }
                        });
                    });
                }

                else{
                    $('#zone_interaction').fadeOut(600, function(){
                        // Chargement AJAX du nouvel environnement
                        var data_test = {
                                ajax : '1',
                                environment : environment
                                };

                        // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                        $.ajax({
                            // url vers la méthode de chargement du nouvel environnement
                            url: 'loadNewEnvironment',
                            // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                            type: 'POST',
                            // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                            async : false,
                            // Données à transmettre et mises en forme précédemment
                            data: data_test,
                            success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                // Insertion de la vue du nouvel environnement chargée par le controleur
                                $('#zone_interaction').html(msg);

                                // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                $('#zone_interaction').fadeIn(600, function(){
                                    // On rend draggable les items du nouvel environnement
                                    $('.item_draggable').draggable({disabled: false});

                                    // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX
                                    load_jquery_properties();
                                });
                            }
                        });
                    });
                }

            }
            // SINON
            else{
                // On incrémente la jauge de temps
                animating = true;
                if((timer_width+30) < 450){
                    $('#timing').animate({
                        width: "+=30px"
                    }, 100, function(){
                        timer_width = timer_width+30;
                        animating = false;
                    });
                }
                //  2b. On indique qu'il y a une ou des erreurs et on continue l'animation
                //  3b. On incrémente la jauge de temps
            }
        });
    }
    
    function replay_game(){
            $('#content').fadeOut(500, function(){
                window.location.href = 'index';
            });
        }

        function save_result(medal, game_id){

            var data_result = {
                medal : medal
                };

            $.ajax({
                // url vers la méthode de chargement du nouvel environnement
                url: 'saveResult',
                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                type: 'POST',
                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                async : false,
                // Données à transmettre et mises en forme précédemment
                data: data_result,
                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                    // Insertion de la vue du nouvel environnement chargée par le controleur
                    //$('#controller_callback').html(msg);
                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                    //$('#controller_callback').fadeIn(2000, function(){
                        $('#content').fadeOut(2000, function(){
                            window.location.href = '../home/index';
                        });
                    //});
                }
            });
        }
